import React, { Fragment, PureComponent } from 'react';
import { Form, Input, Modal, Select, Steps, Button } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import { nameMaxLength, remarkMaxLength } from '@/utils/rule'

const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;


/**
 * 共享文件申请下载页面
 */
@Form.create()
class TreasurySynergy extends PureComponent {

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18},
    };
    this.state = {
      sendSuccess: false, //true验证码发送成功 false验证码未发送
      time: 0 //时间
    };
  }
  //定时器
  countDown() {
    this.setState({ sendSuccess: true })
    this.Timer = setInterval(() => {
      if (this.state.time <= 1) {
        this.setState({ sendSuccess: false, time: 0 })
        clearInterval(this.Timer);
      } else {
        this.setState({ time: this.state.time - 1 })
      }
    }, 1000);
  }

  render() {
    const {querySensitive,checkSensitive,treasuryVisible, form, querySms, handleTreasuryVisible, optType,records, jinkuPeople,jinkuUuid,} = this.props;

    const {sendSuccess, time} = this.state;


    const onModeChange = (value) => {
      querySensitive();
      console.log(`onModeChange value:${value}`);
    }
    const okHandle = () => {

        form.validateFields((err, fieldsValue) => {
          if (err) return;
          // form.resetFields();
          checkSensitive(optType,records,jinkuUuid,fieldsValue);
        });
    }

    const onGetSms = () => {

      form.validateFields(['helppeople'], {}, (err, fieldsValue) => {
        if (err) return;
        querySms(jinkuUuid,fieldsValue);
        //初始化倒计时长
        this.setState({
          time:  60 //默认验证码时间为60s
        })
        this.countDown();
      });
    }

    return (
      <Modal
        width={640}
        bodyStyle={{padding: '32px 40px 48px'}}
        destroyOnClose
        title="金库协同"
        visible={treasuryVisible}
        onOk={okHandle}
        onCancel={() => handleTreasuryVisible()}
        afterClose={() => handleTreasuryVisible()}
        maskClosable={false}
      >
        <FormItem {...this.formLayout} label="授权模式">
          {form.getFieldDecorator('moshi')(
            <Select placeholder="请选择授权模式" style={{width: '100%'}} onChange={onModeChange}>
              <Option value={1}>远程授权</Option>
              <Option value={2}>本地授权</Option>
            </Select>
          )}
        </FormItem>

        <FormItem {...this.formLayout} label="协同操作人">
          {form.getFieldDecorator('helppeople',{
            rules: [{ required: true,message: '协同操作人不能为空'}],})(
            <Select placeholder="请选择" style={{width: '100%'}}>
              {
              jinkuPeople && jinkuPeople.length && jinkuPeople.map((v,i) => {
                return (<Option key={i} value={v}>{v}</Option>)
              })
            }
            </Select>
          )}
        </FormItem>

        {form.getFieldValue('moshi') === 2?
          <FormItem {...this.formLayout} label="主密码">
            {form.getFieldDecorator('mimaa',{initialValue: '',
          rules: [{ required: true,message: '主密码不能为空'}]
          })(<Input placeholder="请输入主密码或验证码" type="password"/>)}
          </FormItem>:null}

        {form.getFieldValue('moshi') === 1?[ <FormItem {...this.formLayout} label="手机验证码">
            {form.getFieldDecorator('shouji',{initialValue: '',
              rules: [{ required: true,message: '手机验证码不能为空'}]
            })(<Input placeholder="请输入手机验证码" />)}
          </FormItem>,<Fragment>
            <Button type="primary" onClick={onGetSms} style={{marginRight:'10px',backgroundColor: sendSuccess ? '#999' : '#f70' }} disabled= { sendSuccess }>
              { sendSuccess? time+ 's' : '获取验证码'}
            </Button>
          </Fragment>]
         :null}
      </Modal>
    );
  }
}

export default TreasurySynergy;
